<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="list-item">
      <div class="item-name">
        <div class="comment_item">
          <el-avatar :size="40" :src="item.avatar">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" alt="" />
          </el-avatar>
          <div class="comment_content">
            <span style="display: block; padding-bottom: 6px;">{{ item.nickname }}</span>
            <span v-if="item.replayUserNickname">回复 {{ item.replayUserNickname }}</span>
            <span>{{ item.comment }}</span>
            <span>{{ item.createTimestamp | formatTime }}</span>
            <el-button
              size="mini"
              @click="replyComment(item.commentId, item.userId)"
            >回复</el-button>
            <el-button
              size="mini"
              @click="deleteComment(item.commentId, item.userId)"
            >删除</el-button>
          </div>
        </div>
      </div>
      <div v-if="item.subCommentList" class="children-item">
        <CommentList :list="item.subCommentList" :content-id="contentId"></CommentList>
      </div>
    </div>
  </div>
</template>
<script>
import {
  pushcomment,
  deletecomment
} from '@/api/customSetting'
export default {
  name: 'CommentList',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    list: Array,
    // eslint-disable-next-line vue/require-default-prop
    contentId: String
  },
  methods: {
    replyComment(commentId, userId) {
      this.$prompt('请输入评论内容', '评论', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const data = {
          'comment': value,
          'replayUserId': userId,
          'targetCommentId': commentId,
          'targetContentId': this.contentId
        }
        pushcomment(data).then(response => {
          this.$message.success('评论成功')
        })
      }).catch((err) => {
        this.$message.error(err)
      });
    },
    deleteComment(commentId, userId) {
      console.log('删除评论')
      const data = {
        commentId: commentId,
        userId: userId
      }
      deletecomment(data).then(response => {
        this.$message.success('删除成功')
      })
    }
  }
};
</script>

<style>
.comment_content{
  position: absolute;
  margin-top: -40px;
  margin-left: 50px;
}
.children-item{
  margin-left: 20px;
}
.item-name{
  height: 70px;
}
.comment_item{
}
</style>
